import React from 'react'
import { Row, Col, Card, Tag } from 'antd'
import { TeamOutlined, SettingOutlined, FileTextOutlined } from '@ant-design/icons'

const VillageManagement: React.FC = () => {
  const managementItems = [
    {
      title: '村务公开',
      description: '村级事务公开透明化管理',
      status: 'active',
      icon: <FileTextOutlined />
    },
    {
      title: '人员管理',
      description: '村民信息管理和统计',
      status: 'active',
      icon: <TeamOutlined />
    },
    {
      title: '资产管理',
      description: '村级集体资产管理',
      status: 'developing',
      icon: <SettingOutlined />
    }
  ]

  return (
    <div>
      <div className="page-title">
        <TeamOutlined />
        村级事务管理模块
      </div>

      <Row gutter={[16, 16]}>
        {managementItems.map((item, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card 
              className="custom-card"
              actions={[
                <a key="view">查看详情</a>,
                <a key="manage">管理</a>
              ]}
            >
              <Card.Meta
                avatar={item.icon}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {item.title}
                    <Tag color={item.status === 'active' ? 'success' : 'processing'}>
                      {item.status === 'active' ? '已上线' : '开发中'}
                    </Tag>
                  </div>
                }
                description={item.description}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default VillageManagement